<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Hello 触动精灵 ShowUI</title>
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <!--标准mui.css-->
    <link rel="stylesheet" href="css/tsShowUI.css">
    <!--App自定义的css-->
</head>

<body>
    <header class="mui-bar mui-bar-nav">
        <button id="ts-cancle" class="mui-action-back mui-btn mui-btn-blue mui-btn-link mui-btn-nav mui-pull-left"><span class="mui-icon mui-icon-left-nav"></span><span class=" mui-tscancel">返回</span></button>
        <h1 class="mui-title mui-tstitle"></h1>
    </header>
    <footer class="mui-bar mui-bar-footer mui-bar-tsfooter">
        <button id="ts-post-btn" class="mui-ts-footerbth btn mui-btn-block mui-btn-blue mui-tsaction" data-loading-text="执行中" type="button">开始</button>
    </footer>
    <div class="mui-content">
        <form class="mui-tsform">
            <div class="mui-card" id="renderbox">
            </div>
        </form>
    </div>
    <script src="js/tsShowUI.js"></script>
    <script>
    (function($, doc) {
        var uiVersion=$.getVersion();//获取ui版本

        //json兼容原showui 格式
        var showui_json = {
            "title": "触动精灵脚本配置", //给页面添加标题（默认标题无）
            "cancelname": "取消", //给页面取消按钮添加文字（默认文字无）
            "config": "save_01",
            "okname": "开始", //给页面开始按钮添加文字（默认“开始”）
            "style": "default",
            "timer": 99,
            "orient": 0,
            "pagetype": "multi",
            "view": [{
                "type": "Label",
                "text": "标题1",
                "size": 18,
                "align": "center",
                "color": "0,168,233"
            }, {
                "type": "Image",
                "src": "http://www.touchsprite.com/wp-content/uploads/2016/10/banner2_790x230-790x0.png"
            }, {
                "type": "Label",
                "text": "switches控件",
                "size": 16,
                "align": "left",
                "color": "0,168,233"
            }, {
                "type": "switches",
                "list": "开关1,开关2,开关3",
                "select": "0@2"
            }, {
                "type": "Label",
                "text": "RadioGroup控件",
                "size": 16,
                "align": "left",
                "color": "0,168,233"
            }, {
                "id": "ceshi4",
                "type": "RadioGroup",
                "list": "选项1,选项2,选项3",
                "select": "1"
            }, {
                "type": "Label",
                "text": "Edit控件（普通）",
                "size": 16,
                "align": "left",
                "color": "0,168,233"
            }, {
                "id": "ceshi5",
                "type": "Edit",
                "prompt": "请输入一个字母",
                "text": "默认值",
                "kbtype": "ascii"
            }, {
                "type": "Label",
                "text": "Edit控件（多行）",
                "size": 16,
                "align": "left",
                "color": "0,168,233"
            }, {
                "id": "ceshi6",
                "type": "Edit",
                "prompt": "请输入一个字母",
                "text": "默认值",
                "row": "5",
                "kbtype": "ascii"
            }, {
                "type": "Label",
                "text": "Edit控件（滑块）",
                "size": 16,
                "align": "left",
                "color": "0,168,233"
            }, {
                "type": "Edit",
                "prompt": "请输入一个数字",
                "text": "2",
                "kbtype": "range",
                "max": "100",
                "min": "0",
            }, {
                "type": "Label",
                "text": "Edit控件（数字）",
                "size": 16,
                "align": "left",
                "color": "0,168,233"
            }, {
                "id": "ceshi7",
                "type": "Edit",
                "prompt": "请输入一个数字",
                "text": "123456",
                "kbtype": "number"
            }, {
                "type": "Label",
                "text": "Edit控件（密码）",
                "size": 16,
                "align": "left",
                "color": "0,168,233"
            }, {
                "id": "ceshi8",
                "type": "Edit",
                "prompt": "请输入密码",
                "text": "hhkjkjh",
                "kbtype": "password"
            }, {
                "type": "Label",
                "text": "CheckBoxGroup控件",
                "size": 16,
                "align": "left",
                "color": "0,168,233"
            }, {
                "id": "ceshi9",
                "type": "CheckBoxGroup",
                "list": "选项1,选项2,选项3,选项4",
                "select": "0@3",
            }, {
                "type": "Label",
                "text": "ComboBox控件（二级）",
                "size": 16,
                "align": "left",
                "color": "0,168,233"
            }, {
                "id": "ceshi10",
                "type": "ComboBox",
                "list": "选项1,选项2,选项3",
                "select": "2",
                "data": "子选项1,子选项2,子选项3,子选项4#子选项5,子选项6,子选项7#子选项8,子选项9",
                "source": "test"
            }, {
                "type": "Label",
                "text": "ComboBox控件（一级）",
                "size": 16,
                "align": "left",
                "color": "0,168,233"
            }, {
                "id": "ceshi11",
                "type": "ComboBox",
                "list": "选项1,选项2,选项3,选项4,选项5,选项6,选项7",
                "select": "1"
            }]
        };

        $.renderUI(showui_json);
    })(mui, document)
    </script>
</body>

</html>
